	<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>角色管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card>
			<!-- 添加角色按钮区域 -->
			<el-row>
				<!-- 表单搜索 -->
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="角色名称">
						<el-input v-model="formInline.Name" placeholder="角色名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" round @click="onSubmit">搜索</el-button>
						<el-button type="success" @click="dialogAddFormVisible=true" round>添加角色</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<!-- 角色列表区域 -->
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column header-align="center" align="center" prop="Id" label="序号">
				</el-table-column>
				<el-table-column header-align="center" align="center" prop="Name" label="姓名">
				</el-table-column>
				<el-table-column header-align="center" align="center" label="操作">
					<template slot-scope="scope">
						<el-button icon="el-icon-setting" size="mini" type="primary" @click="setRole(scope.row)">模块
						</el-button>
					<!-- 	<el-button icon="el-icon-news" size="mini" type="success" @click="">权限
						</el-button> -->
						<el-button icon="el-icon-edit" size="mini" type="warning" @click="editRoles(scope.row)">修改
						</el-button>
						<el-button icon="el-icon-delete" size="mini" type="danger" @click="delRoles(scope.row.Id)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
				:page-sizes="[10, 15, 20, 25]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
				:total="count">
			</el-pagination>
		</el-card>
		<!-- 添加对话框 -->
		<el-dialog @close="addDialogClosed" title="添加角色" :visible.sync="dialogAddFormVisible">
			<el-form :model="addform" ref="addFormRef" :rules="addFormRefRules">
				<el-form-item label="角色名称" prop="Name" :label-width="formLabelWidth">
					<el-input v-model="addform.Name" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogAddFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addRoles">确 定</el-button>
			</div>
		</el-dialog>
        <!-- 修改角色 -->
		<el-dialog title="修改角色名称" :visible.sync="dialogEditFormVisible">
		  <el-form :model="editform" ref="editformRef" :rules="editformRules">
		    <el-form-item prop="Name" label="角色名称" :label-width="formLabelWidth">
		      <el-input v-model="editform.Name" auto-complete="off"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="editDialogClosed">取 消</el-button>
		    <el-button type="primary" @click="submitRoles">确 定</el-button>
		  </div>
		</el-dialog>
		<!--添加角色对话框 -->
		<el-dialog title="你正在设置角色模块" :visible.sync="setRoleDialogVisible" width="50%" @close="setRoleDialogClosed">
		      <div>
		        <p>当前的角色:{{roleInfo.Name}}</p>
		        <p>
		          <el-tree :data="rolesList" show-checkbox node-key="Id" 
		            :default-checked-keys="value"  ref="tree" v-model="value" :props="defaultProps">
		          </el-tree>
		        </p>
		      </div>
		      <span slot="footer" class="dialog-footer">
		        <el-button @click="setRoleDialogVisible = false">取 消</el-button>
		        <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
		      </span>
		    </el-dialog>
		
		
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formInline: {
					Name: ''
				},
				addFormRefRules:{
					Name: [{
							required: true,
							message: '请输入角色名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					]},
					editformRules:{
						Name: [{
								required: true,
								message: '请输入角色名称',
								trigger: 'blur'
							},
							{
								min: 3,
								max: 10,
								message: '长度在 3 到 10 个字符',
								trigger: 'blur'
							}
						]
					},
				addform: {},
				editform:{},
				tableData: [],
				page: 1,
				limit: 10,
				count: 0,
				formLabelWidth: "80px",
				dialogAddFormVisible: false,
				dialogEditFormVisible:false,
				//模块
				setRoleDialogVisible:false,
				//需要被分配角色的用户信息
				roleInfo: {},
				//所有角色的数据列表
				rolesList: [],
				defaultProps: {
				children: 'children',
				label: 'Name'
				},
				value:[],
				Ids:[]
			}
		},
		created() {
			this.getRolesList()
		},
		methods: {
			onSubmit() {
				this.getRolesList()
			},
			handleSizeChange(val) {
				this.limit = val;
			},
			handleCurrentChange(val) {
				this.page = val;
			},
			// 获取所有角色的列表
			async getRolesList() {
				const {
					data: res
				} = await this.$http.get('api/Roles/getTableList', {
					params: {
						page: this.page,
						limit: this.limit,
						Name: this.formInline.Name
					}
				})
				this.count = res.count;
				this.tableData = res.data;
			},
			//添加角色处理
			addRoles() {
				this.$refs.addFormRef.validate(async valid => {
					if (!valid) return
					const {
						data: res
					} = await this.$http.post('api/Roles/addRole', this.addform)
					if (res.code !==0) {
						this.$message.error(res.msg);
					}
					this.$message.success(res.msg);
					this.dialogAddFormVisible = false;
					this.getRolesList();
				})
			},
			//关闭添加对话框处理
			addDialogClosed() {
				this.$refs.addFormRef.resetFields()
			},
			//删除角色处理
			async delRoles(id) {
				const confirmResult = await this.$confirm('此操作将永久删除该员工,是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => {
					return err
				})
				if (confirmResult !== 'confirm') {
					return this.$message.info('已取消删除！')
				}
				const {
					data: res
				} = await this.$http.post('api/Roles/delRoles', {
					id
				})
				if (res.code !== 0) {
					return this.$message.error(res.msg)
				}
				this.$message.success(res.msg)
				this.getRolesList()
			},
			//编辑角色
			editRoles(row){
				this.editform=row;
				this.dialogEditFormVisible=true;
			},
			//角色编辑提交处理
		   async submitRoles(){
				const{data:res}=await this.$http.post('api/Roles/submitRole',this.editform)
				if(res.code!==0){
					this.$message.error(res.msg);
				}
				this.$message.success(res.msg);
				this.dialogEditFormVisible=false;
				this.getRolesList();
			},
			//编辑弹框关闭处理
			editDialogClosed(){
				this.editform={};
				this.getRolesList();
				this.dialogEditFormVisible=false;
			},
			//模块关闭对话框处理事件
			setRoleDialogClosed(){
				  this.value = []
				  this.userInfo = {}
			},
			//模块提交
			async saveRoleInfo(){
				  this.Ids= this.$refs.tree.getCheckedKeys();
				        const {
				          data: res
				        } = await this.$http.get('api/Roles/EditRM', {
				          params:{
				          Id:this.roleInfo.Id,
				          Value:this.Ids.toString()
				        }})
				        if (res.code !== 0) {
				          return this.$message.error(res.msg)
				        }
				        this.$message.success(res.msg)
				        //刷新数据列表
				        this.getRoleList()
				        //隐藏对话框
				        this.setRoleDialogVisible = false
			},
			//展示模块管理的对话框
			      async setRole(row) {
			        this.roleInfo = row
			        const {
			          data: res
			        } = await this.$http.get('api/Roles/GetAllModules')
			        if (res.code !== 0) {
			          this.$message.error("获取全部模块失败")
			        }
			        this.rolesList = res.data
			        this.rolesList=res.data;
			        const {data:ress} =await this.$http.post('api/Roles/GetMyModules',this.roleInfo)
			        if(res.code!== 0){
			          return this.$message.error('获取模块列表失败！')
			        }
			        this.value=ress.data;
			        this.setRoleDialogVisible = true
			      }
			
		}
	}
</script>

<style lang="less" scoped="scoped">
	.el-tag {
		margin: 7px;
	}

	.bdtop {
		border-top: 1px solid #eee;
	}

	.bdbottom {
		border-bottom: 1px solid #eee;
	}

	.vcenter {
		display: flex;
		align-items: center;
	}
</style>
